<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        
        <title>MyGod UI Template</title>
        
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="author" content="">

        <link rel="shortcut icon" href="/path/to/favicon.ico">
        
        <!-- MyGod UI CSS -->
        <link href="../src/mygod.css" rel="stylesheet">
    </head>
    <body>
        <div class="container" style="background: green;">
            <h1>.container 是容器</h1>
            <h1>.container 是宽度 100% 的容器</h1>
            <h1>.row 表示行</h1>
            <h1>.col-s[m|l|lg]-1~12 表示列</h1>
            <h1>.col-s[m|l|lg]-push-1~12 列向右移动</h1>
            <h1>.col-s[m|l|lg]-pull-1~12 列向左移动</h1>
            <h1>.col-s[m|l|lg]-offset-1~12 列偏移(margin-left)</h1>
        </div>
        
        <div class="container" style="background: red;">
            <div class="row">
                <h1>.row 必须在 .container 中</h1>
                <h1>.row 抵消了 .container 的 padding</h1>
            </div>
        </div>
        
        <div class="container">
            <div class="row">
                <div class="col-s-1" style="background: green;">
                    <h1>col-s-1</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-s-1" style="background: green;">
                    <h1>col-s-1</h1>
                </div>
                <div class="col-s-1" style="background: red;">
                    <h1>col-s-1</h1>
                </div>
                <div class="col-s-1" style="background: green;">
                    <h1>col-s-1</h1>
                </div>
                <div class="col-s-1" style="background: red;">
                    <h1>col-s-1</h1>
                </div>
                <div class="col-s-1" style="background: green;">
                    <h1>col-s-1</h1>
                </div>
                <div class="col-s-1" style="background: red;">
                    <h1>col-s-1</h1>
                </div>
                <div class="col-s-1" style="background: green;">
                    <h1>col-s-1</h1>
                </div>
                <div class="col-s-1" style="background: red;">
                    <h1>col-s-1</h1>
                </div>
                <div class="col-s-1" style="background: green;">
                    <h1>col-s-1</h1>
                </div>
                <div class="col-s-1" style="background: red;">
                    <h1>col-s-1</h1>
                </div>
                <div class="col-s-1" style="background: green;">
                    <h1>col-s-1</h1>
                </div>
                <div class="col-s-1" style="background: red;">
                    <h1>col-s-1</h1>
                </div>
                <div class="col-s-1" style="background: green;">
                    <h1>col-s-1</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-s-2" style="background: green;">
                    <h1>col-s-2</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-s-3" style="background: green;">
                    <h1>col-s-3</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-s-4" style="background: green;">
                    <h1>col-s-4</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-s-5" style="background: green;">
                    <h1>col-s-5</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-s-6" style="background: green;">
                    <h1>col-s-6</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-s-7" style="background: green;">
                    <h1>col-s-7</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-s-8" style="background: green;">
                    <h1>col-s-8</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-s-9" style="background: green;">
                    <h1>col-s-9</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-s-10" style="background: green;">
                    <h1>col-s-10</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-s-11" style="background: green;">
                    <h1>col-s-11</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-s-12" style="background: green;">
                    <h1>col-s-12</h1>
                </div>
            </div>
        </div>
        
        <div class="container">
            <div class="row">
                <div class="col-s-1 col-s-push-1" style="background: red;">
                    <h1>.col-s-push-1</h1>
                </div>
            </div>
        </div>
        
        <div class="container">
            <div class="row">
                <div class="col-s-1 col-s-offset-1" style="background: red;">
                    <h1>.col-s-left-1</h1>
                </div>
                <div class="col-s-1" style="background: red;">
                    <h1>.col-s-1</h1>
                </div>
            </div>
        </div>
        
        <!-- MyGod UI JS -->
        <script src="../src/mygod.js"></script>
    </body>
</html>